Перейти к основному содержимому

8.08. Компьютерная графика

ДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВНЕ ОБЯЗАТЕЛЬНОВ РАЗРАБОТКЕ
Всем

Общая теория​

Компьютерная графика — дисциплина, занимающаяся созданием, обработкой, анализом и визуализацией изображений с использованием вычислительных средств. Она лежит в основе множества современных технологий: от пользовательских интерфейсов и полиграфии до кинематографа, архитектурного моделирования и иммерсивных сред виртуальной реальности. Компьютерная графика объединяет методы математики, физики, информатики и визуального искусства, образуя уникальный междисциплинарный инструмент, позволяющий человеку не только отображать, но и проектировать реальность.

На практике компьютерная графика разделяется на две основные ветви: растровую (пиксельную) и векторную, хотя в современных системах эти подходы часто интегрируются. Кроме того, различают двумерную (2D) и трёхмерную (3D) графику, каждая из которых требует своих алгоритмов, представлений данных и инструментов.

Ключевые цели компьютерной графики формируют её архитектуру и определяют выбор технологий:

  1. Визуализация — преобразование абстрактных данных или скрытых структур в наглядную форму. Примеры: графики функций, тепловые карты, CAD-модели, медицинская визуализация.
  2. Симуляция — воспроизведение поведения реальных объектов и процессов, включая освещение, тени, отражения, физические взаимодействия. Это основа реалистичного рендеринга.
  3. Интерактивность — обеспечение динамического взаимодействия пользователя с графическим контентом: от перемещения окон до управления аватаром в виртуальном мире.
  4. Генерация — автоматическое создание изображений, моделей или анимаций с помощью алгоритмических методов, включая процедурную генерацию, генеративные нейросети и параметрическое моделирование.

Рассмотрим эти аспекты систематически.

Основы представления изображений​

Любое цифровое изображение — это дискретное представление непрерывного визуального сигнала. В зависимости от способа кодирования выделяют два основных типа:

  • Растровая графика представляет изображение как прямоугольную сетку пикселей, каждый из которых обладает определённым цветом. Такой подход эффективен для фотографий и сложных текстур, но подвержен потере качества при масштабировании.
  • Векторная графика описывает изображение набором математических примитивов: точек, линий, кривых Безье, полигонов и их атрибутов (толщина, цвет, заливка). Это делает изображение масштабируемым без потерь и особенно полезным для логотипов, схем, чертежей, типографики и печати.

Таким образом, выбор между растровой и векторной графикой определяется задачей: точность репрезентации формы против детализации текстуры.

Цветовые модели и цветовые пространства​

Цвет — субъективное восприятие, но для его цифрового представления требуются строгие математические модели. Наиболее распространённые цветовые модели:

RGB (Red, Green, Blue)​

Аддитивная модель, основанная на смешении трёх основных цветов света. Используется в устройствах отображения: мониторах, проекторах, телефонах. Каждый канал обычно кодируется 8 битами (0–255), что даёт 16,7 млн возможных цветов в 24-битном режиме.

HSV/HSL (Hue, Saturation, Value/Lightness)​

Цилиндрическая модель, ориентированная на интуитивное восприятие цвета человеком. Оттенок (Hue) определяет «цвет» в спектре, насыщенность — чистоту цвета, а значение/светлота — яркость. Широко применяется в графических редакторах для удобства ручной настройки.

CMYK (Cyan, Magenta, Yellow, Key/Black)​

Субтрактивная модель, используемая в полиграфии. Здесь цвета формируются путём поглощения (вычитания) света пигментами. Чёрный (Key) добавляется отдельно для улучшения глубины и экономии цветных чернил.

Важно понимать, что модели — это не пространства. Цветовое пространство (например, sRGB, Adobe RGB, DCI-P3) определяет, как конкретные числовые значения интерпретируются в физические цвета. Это влияет на цветопередачу между устройствами.

Гамма-коррекция и линейные пространства​

Человеческое зрение воспринимает яркость нелинейно: мы чувствительнее к тёмным оттенкам. Исторически дисплеи также имели нелинейную световую характеристику. Для компенсации применяется гамма-коррекция — нелинейное преобразование, позволяющее равномерно использовать биты для восприятия. Современные системы графики всё чаще работают в линейном пространстве при расчётах освещения (например, рендеринг в Blender или Unreal Engine), а преобразование в sRGB применяется только на этапе вывода на экран. Это обеспечивает физически корректное смешение света.

HDR и тонмаппинг​

High Dynamic Range (HDR) — метод хранения и обработки изображений с динамическим диапазоном, превышающим возможности стандартного дисплея. Вместо 8 бит на канал используются 16- или 32-битные значения с плавающей точкой. Поскольку дисплеи не могут отобразить весь диапазон, применяется тонмаппинг — алгоритм сжатия динамического диапазона с сохранением контрастных деталей. Существуют локальные и глобальные алгоритмы тонмаппинга, каждый со своими компромиссами между реализмом, скоростью и артефактами.

Двумерная и трёхмерная графика: инструменты и задачи​

2D-графика и редакторы​

Двумерная графика находит применение в UI/UX-дизайне, иллюстрации, анимации, полиграфии и образовательных средах.

  • Paint, Paint.NET — растровые редакторы начального и среднего уровня. Paint.NET поддерживает слои, фильтры и плагины, что делает его подходящим для базовой обработки изображений.
  • Adobe Photoshop — промышленный стандарт растровой графики: фотообработка, компоновка, текстурирование. Поддерживает сложные рабочие процессы, включая цветокоррекцию и автоматизацию через скрипты.
  • Adobe Illustrator, CorelDRAW — векторные редакторы. Используются для создания логотипов, схем, типографики. Основаны на кривых Безье, поддерживают параметрическое редактирование и прецизионную печать.
  • Pixel-art и ретро-дизайн — художественный стиль, где каждый пиксель контролируется вручную. Требует специализированных инструментов (Aseprite, GraphicsGale), но развивает понимание цвета, формы и композиции на элементарном уровне.
  • Scratch — образовательная платформа, где дети создают интерактивные 2D-анимации и игры, оперируя спрайтами и событиями. Вводит в основы анимации и логики поведения.
  • Spine 2D — профессиональный инструмент для скелетной 2D-анимации, особенно в разработке игр. Позволяет анимировать персонажей через деформируемые кости, что экономит ресурсы по сравнению с покадровой анимацией.

3D-моделирование и симуляция​

Трёхмерная графика используется для проектирования, симуляции, развлечений и инженерии.

  • Blender — открытая, полнофункциональная система для 3D-моделирования, анимации, симуляции, рендеринга и даже видеомонтажа. Поддерживает как растеризацию (EEVEE), так и ray tracing (Cycles).
  • Tinkercad — браузерный CAD-инструмент для начинающих, ориентированный на 3D-печать. Оперирует примитивами и булевыми операциями.
  • LeoCAD — свободная среда для проектирования моделей LEGO, основанная на LDraw-библиотеке. Полезна для обучения пространственному мышлению и параметрическому конструированию.
  • Компас-3D — российская CAD-система, применяемая в машиностроении и промышленном дизайне. Фокусируется на точности, допусках и производственной документации.

Моделирование включает создание геометрии (мешей), материалы, освещение и анимацию. Ключевой элемент — трансформации.

Математические основы 3D-графики​

Трёхмерное пространство в компьютерной графике описывается с помощью однородных координат и матричной алгебры. Любая трансформация — перемещение, вращение, масштабирование — представляется как умножение вектора точки на матрицу 4×4.

  • Перемещение (Translation): добавление вектора смещения. Реализуется через последний столбец матрицы.
  • Вращение (Rotation): описывается углами Эйлера или кватернионами (предпочтительнее для избежания блокировки осей — gimbal lock).
  • Масштабирование (Scaling): умножение координат на коэффициенты по осям.

Цепочка трансформаций (например, поворот вокруг собственной оси, затем перемещение в сцену) реализуется путём умножения матриц в обратном порядке (последняя трансформация — левая в произведении).

Проекция​

Чтобы отобразить 3D-сцену на 2D-экран, используется проекция:

  • Перспективная проекция имитирует свойства человеческого зрения: объекты удаляются — кажутся меньше, параллельные линии сходятся в точке схода. Математически реализуется через деление на Z-координату с использованием однородных координат.
  • Ортогональная (ортографическая) проекция сохраняет размеры объектов независимо от расстояния. Применяется в инженерных чертежах и CAD, где важна метрическая точность.

Матрица проекции преобразует координаты из видового (camera) пространства в каноническое (clip space), после чего аппаратура графического процессора выполняет перспективное деление и растеризацию.

Рендеринг: от геометрии к пикселю​

Рендеринг — процесс преобразования трёхмерной сцены, описанной геометрией, материалами, источниками света и камерой, в двумерное изображение. Этот процесс лежит в основе всей визуализации — от простейших UI-элементов до кинематографических сцен, созданных в offline-рендерерах.

Существует два основных подхода к рендерингу:

1. Растеризация (Rasterization)​

Это доминирующий метод в реальном времени (real-time rendering), применяемый в играх, интерактивных приложениях и веб-графике. Суть метода:

  • Сцена разбивается на примитивы (обычно треугольники).
  • Каждый примитив проецируется на экран в 2D-координаты.
  • Затем определяется, какие пиксели покрываются этим примитивом (scan conversion).
  • Для каждого пикселя вычисляется его цвет на основе материала, освещения и текстур.

Растеризация чрезвычайно оптимизирована на аппаратном уровне: современные GPU содержат сотни растеризаторов, работающих параллельно. Однако метод имеет ограничения: он не моделирует глобальное освещение (отражения, преломления, цветные тени от диффузного рассеяния) без дополнительных хаков (screen-space reflections, ambient occlusion и т.п.).

2. Трассировка лучей (Ray Tracing)​

Метод, основанный на физике распространения света. Для каждого пикселя испускается луч из камеры в сцену; при пересечении с объектом могут испускаться дополнительные лучи — отражённые, преломлённые, теневые. Рекурсивное вычисление позволяет достичь высокой фотореалистичности: точные отражения, мягкие тени, каустики.

  • Offline ray tracing — используется в кино и архитектурной визуализации (например, в рендерах Arnold, V-Ray). Время рендеринга одного кадра может составлять часы.
  • Real-time ray tracing — стал возможен благодаря специализированным ядрам в GPU (RT Cores в NVIDIA, Ray Accelerators в AMD). Поддерживается в DirectX 12 Ultimate, Vulkan и Metal. Однако даже с ускорением используется гибридно: основное изображение создаётся растеризацией, а ray tracing применяется выборочно (для отражений, теней, глобального освещения).

Более продвинутый подход — path tracing — моделирует путь света от источника к камере, учитывая многократные рассеяния. Это даёт наиболее физически корректный результат, но требует огромных вычислительных ресурсов.

Шейдеры: программируемый графический конвейер​

Современная графика стала возможной благодаря шейдерам — небольшим программам, выполняемым на GPU. Они позволяют контролировать каждый этап визуализации и вводить кастомную логику.

Основные типы шейдеров в конвейере:

  • Vertex Shader — выполняется для каждой вершины примитива. Здесь происходит трансформация из локального пространства объекта в clip space, а также передача данных (например, нормалей, UV-координат) в следующие этапы.
  • Fragment (Pixel) Shader — вызывается для каждого фрагмента (потенциального пикселя). В нём вычисляется итоговый цвет с учётом текстур, освещения, прозрачности. Именно здесь реализуются эффекты вроде PBR (Physically Based Rendering), параллакс-маппинга, эмиссии.
  • Geometry Shader — опциональный этап, позволяющий генерировать или модифицировать примитивы на лету (например, создавать частицы или линии из точек).
  • Tessellation Shaders — разбивают крупные полигоны на мелкие на основе уровня детализации, что экономит память при хранении моделей.
  • Compute Shader — не привязан к графическому конвейеру; используется для общих вычислений на GPU: физика, постобработка, ИИ.

Шейдеры пишутся на специализированных языках: GLSL (OpenGL), HLSL (DirectX), MSL (Metal), WGSL (WebGPU). Все они похожи по структуре и предоставляют доступ к встроенным функциям линейной алгебры.

Графические API: мост между приложением и GPU​

Приложения не взаимодействуют с GPU напрямую — этим занимается графический API (Application Programming Interface). Он абстрагирует аппаратные различия и предоставляет стандартизированный интерфейс для отправки команд.

Основные API:​

  • OpenGL — кроссплатформенный, открытый стандарт, доминировавший в 2000–2010-х. Прост в освоении, но устарел в части архитектуры: использует «состояния» и скрытые буферы, что мешает эффективному параллелизму. Поддержка прекращена в 2019 году, но остаётся в legacy-системах.
  • DirectX 12 — от Microsoft, предназначен для Windows и Xbox. Обеспечивает низкоуровневый контроль над GPU, минимизируя накладные расходы драйвера. Требует от разработчика управления памятью и синхронизацией, но даёт высокую производительность.
  • Vulkan — кроссплатформенный преемник OpenGL, разработанный Khronos Group. Аналог DirectX 12 по идеологии: явное управление ресурсами, многопоточная запись команд, предсказуемая производительность. Используется в Android, Linux, Windows, консолях.
  • Metal — проприетарный API Apple для iOS, macOS, tvOS. Оптимизирован под собственное железо, обеспечивает минимальную задержку и высокую эффективность энергопотребления.
  • WebGL / WebGPU — для веба. WebGL — основана на OpenGL ES, работает в браузере через JavaScript. WebGPU — новое поколение: безопасный, производительный, основанный на идеях Vulkan/DirectX 12. Уже поддерживается в современных браузерах.

Выбор API определяется целевой платформой, требованиями к производительности и командой разработчиков.

Изображение как математическая конструкция​

В основе всей компьютерной графики лежит идея: изображение — это математическая функция, определённая на области (экране или странице). В растровой графике эта функция дискретизирована; в векторной — задана аналитически.

  • Линии описываются уравнениями (например, y = kx + b) или параметрически (x(t), y(t)).
  • Кривые Безье — параметрические кривые, определяемые контрольными точками. Кубическая кривая Безье. Именно они лежат в основе шрифтов TrueType и PostScript.
  • Полигоны и меш-сетки — основа 3D-моделей. Топология (связность вершин) и геометрия (координаты) разделяются для гибкости.
  • Текстуры — функции, отображающие 2D-координаты (UV) в цвет или другие свойства (нормаль, высота, металличность). Это позволяет декорировать поверхность без увеличения геометрической сложности.

Этот подход обеспечивает масштабируемость, редактируемость и точность — ключевые требования в дизайне, типографике, инженерии и печати.

Растровая графика​

Веб-графика
Canvas 2D
Рисование примитивов, изображений, анимаций.
Подходит для диаграмм, простых игр, редакторов.
Текстуры
Цвет, нормали, шероховатость, металличность, высота.
UV-развёртка — как «обернуть» 2D-текстуру на 3D-объект.
Mipmapping — оптимизация для разных расстояний.

Графический конвейер (Graphics Pipeline)
Классический конвейер (OpenGL-style):
Вершинный шейдер (Vertex Shader) — обработка вершин (позиция, нормаль, UV).
Примитивы — сборка треугольников/линий.
Растеризация — преобразование в пиксели (фрагменты).
Фрагментный шейдер (Pixel/Fragment Shader) — расчёт цвета каждого пикселя.
Тесты и смешивание — глубина (Z-buffer), прозрачность, стENCIL.


Векторная графика​

Векторы и матрицы
Векторы: позиция, направление, нормаль.
Матрицы: трансформации (перенос, поворот, масштаб).
Однородные координаты — для работы с проекциями.

Системы координат
Локальная → Мировая → Камеры → Экранная.
Почему важно понимать цепочку трансформаций.

Геометрическое моделирование
Поверхности Безье, B-сплайны, NURBS.
Полигональные сетки (meshes).
Упрощение, сглаживание, ремешинг.

3D-графика и анимация​

Анимация и геометрия
Анимация
Ключевые кадры (keyframes).
Скелетная анимация (rigging, skinning).
Морфинг, blend shapes.
Физика: мягкие тела, ткани, волосы.



Рендеринг
Растеризация (реальное время)
Быстро, подходит для игр.
Ограниченная физика света (тени, отражения — через хитрости).
Используется в OpenGL, DirectX, WebGL.

Ray Tracing (реалистичный рендеринг)
Трассировка путей света от камеры к источникам.
Реалистичные тени, отражения, преломления, глобальное освещение.
Медленно → раньше — только для фильмов.
Сейчас: RTX (NVIDIA), DXR, Vulkan Ray Tracing — в реальном времени в играх!

GPU и параллельные вычисления
GPGPU (General-Purpose GPU) — вычисления на GPU: физика, ML, обработка изображений.
CUDA, OpenCL, Vulkan Compute — API для GPGPU.
Шейдеры → compute shaders — универсальные программы на GPU.

WebGL (Web Graphics Library)
Основан на OpenGL ES.
Полноценный 3D-рендеринг в браузере.
Библиотеки: Three.js, Babylon.js, PlayCanvas.

3D-рендеринг, шейдеры, физика, анимация, VR/AR.
Canvas, WebGL, анимации, графики, диаграммы (D3.js, Three.js).
Анимации, переходы, GPU-ускоренные интерфейсы.
Визуализация данных: графики, тепловые карты, 3D-визуализации.
3D-реконструкция томограмм, визуализация органов.
Проектирование деталей, зданий, симуляции.
CGI, motion capture, трассировка лучей, композитинг.
Генерация изображений (GAN, Diffusion), обработка изображений (CV).
Обработка видеопотока, SLAM, 3D-картирование.

Освещение и материалы
Модели освещения:
Фонг (Phong) — диффузный + зеркальный + фоновый свет.
Blinn-Phong — улучшенная версия.
PBR (Physically Based Rendering) — физически корректное отражение (металличность, шероховатость).